import { ToolCard } from '@/components/tool-card'
import { FileText, Code, Shuffle } from 'lucide-react'

const tools = [
  {
    id: 'json-formatter',
    name: 'JSON 格式化',
    category: '文本处理',
    description: '美化和验证JSON数据，支持语法高亮和错误检测',
    icon: FileText,
    href: '/tools/json-formatter',
    color: 'blue'
  },
  {
    id: 'base64-converter',
    name: 'Base64 转换',
    category: '编码转换',
    description: '在文本和Base64编码之间进行双向转换',
    icon: Code,
    href: '/tools/base64-converter',
    color: 'green'
  },
  {
    id: 'uuid-generator',
    name: 'UUID 生成器',
    category: '生成器',
    description: '生成唯一标识符，支持v1和v4版本',
    icon: Shuffle,
    href: '/tools/uuid-generator',
    color: 'purple'
  }
]

const categories = [
  {
    name: '文本处理',
    description: '文本格式化、验证和处理工具',
    tools: tools.filter(tool => tool.category === '文本处理')
  },
  {
    name: '编码转换',
    description: '各种编码格式之间的转换工具',
    tools: tools.filter(tool => tool.category === '编码转换')
  },
  {
    name: '生成器',
    description: '生成各种格式的数据和标识符',
    tools: tools.filter(tool => tool.category === '生成器')
  }
]

export default function ToolsPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            开发工具集
          </h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            精选的开发者工具，提高您的工作效率。所有工具都在本地运行，保护您的数据隐私。
          </p>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          <div className="text-center p-6 bg-blue-50 rounded-lg">
            <div className="text-3xl font-bold text-blue-600 mb-2">{tools.length}</div>
            <div className="text-blue-800 font-medium">可用工具</div>
          </div>
          <div className="text-center p-6 bg-green-50 rounded-lg">
            <div className="text-3xl font-bold text-green-600 mb-2">{categories.length}</div>
            <div className="text-green-800 font-medium">工具分类</div>
          </div>
          <div className="text-center p-6 bg-purple-50 rounded-lg">
            <div className="text-3xl font-bold text-purple-600 mb-2">100%</div>
            <div className="text-purple-800 font-medium">隐私保护</div>
          </div>
        </div>

        {/* Tools by Category */}
        <div className="space-y-12">
          {categories.map((category) => (
            <div key={category.name}>
              <div className="mb-6">
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                  {category.name}
                </h2>
                <p className="text-gray-600">
                  {category.description}
                </p>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {category.tools.map((tool) => (
                  <ToolCard key={tool.id} tool={tool} />
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Coming Soon */}
        <div className="mt-16 text-center p-8 bg-gray-50 rounded-lg">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">
            更多工具即将推出
          </h2>
          <p className="text-gray-600 mb-6">
            我们正在开发更多实用的开发工具，包括：
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm text-gray-700">
            <div className="p-3 bg-white rounded border">
              <div className="font-medium mb-1">文本工具</div>
              <div className="text-xs">正则表达式测试、文本差异对比</div>
            </div>
            <div className="p-3 bg-white rounded border">
              <div className="font-medium mb-1">编码工具</div>
              <div className="text-xs">URL编码、HTML实体转换</div>
            </div>
            <div className="p-3 bg-white rounded border">
              <div className="font-medium mb-1">哈希工具</div>
              <div className="text-xs">MD5、SHA256、CRC32计算</div>
            </div>
            <div className="p-3 bg-white rounded border">
              <div className="font-medium mb-1">时间工具</div>
              <div className="text-xs">时间戳转换、时区转换</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}